<template>
    <div>
        <el-table
            v-loading="listLoading"
            :data="dataItems"
            style="width: 100%">
            <el-table-column prop="id" label="#" width="60" show-overflow-tooltip></el-table-column>
            <template v-for="col in headItems">
                <!--标签-->
                <el-table-column
                    v-if="col.type == 'dict'"
                    align="center"
                    :prop="col.key"
                    :label="col.label"
                    :min-width="col.width ||'100px'"
                >
                    <template slot-scope="scope">
                        <el-tag
                            :type="$enum.getDescByValue(col.key,scope.row[col.key]).type"
                        >{{$enum.getDescByValue(col.key,scope.row[col.key]).name}}
                        </el-tag>
                    </template>
                </el-table-column>

                <!--时间-->
                <el-table-column
                    v-else-if="col.type == 'datetime'"
                    align="center"
                    :prop="col.key"
                    :label="col.label"
                    :min-width="col.width ||'180px'"
                >
                    <template slot-scope="scope">
                        <i class="el-icon-time" v-if="scope.row[col.key]"></i>
                        <span style="margin-left: 10px">{{ scope.row[col.key] }}</span>
                    </template>
                </el-table-column>

                <!--图片-->
                <el-table-column
                    v-else-if="col.type == 'image'"
                    align="center"
                    :prop="col.key"
                    :label="col.label"
                    :min-width="col.width ||'80px'"
                >
                    <template slot-scope="scope">
                        <el-image
                            lazy
                            :preview-src-list="[col.formatter?col.formatter(scope.row):scope.row[col.key]]"
                            :src="col.formatter?col.formatter(scope.row):scope.row[col.key]"
                        >
                            <div
                                slot="error"
                                class="image-slot"
                                style="background: #f5f7fa;width: 58px;height: 40px;"
                            >
                                <i class="el-icon-picture-outline" style="font-size: 30px;padding-top: 5px;"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>

                <!--普通文本-->
                <el-table-column
                    v-else
                    align="center"
                    :label="col.label"
                    :prop="col.key"
                    :min-width="col.width ||'100px'"
                    show-overflow-tooltip
                ></el-table-column>
            </template>

            <!--操作按钮-->
            <el-table-column
                align="center"
                label="操作"
                fixed="right"
                :width="operateWidth + 'px'"
                v-if="actItems.length > 0 || apis.delete || apis.detail || apis.update"
            >
                <template slot-scope="scope">
                    <!--按钮式-->
                    <el-button-group class="butBox">
                        <template v-for="item in actItems">
                            <span v-if="!item.show || item.show(scope.row)" :key="item.key">
                                <el-button
                                    size="mini"
                                    @click="actEvent(item.key,scope.row)"
                                    :type="item.type"
                                >{{item.label}}</el-button>
                            </span>
                        </template>
                        <template v-if="apis.update">
                          <span>
                            <el-button
                                size="mini"
                                @click="actEvent('addEdit',scope.row)"
                                type="primary"
                            >编辑</el-button>
                          </span>
                        </template>
                        <template v-if="apis.detail">
                            <el-button
                                size="mini"
                                @click="actEvent('detail',scope.row)"
                                type="success"
                            >详情</el-button>
                        </template>
                        <template v-if="apis.auth">
                          <span>
                            <el-button
                                size="mini"
                                @click="actEvent('auth',scope.row)"
                                type="warning"
                            >授权</el-button>
                          </span>
                        </template>
                        <template v-if="apis.delete">
                          <span>
                            <el-button
                                size="mini"
                                @click="actEvent('delete',scope.row)"
                                type="danger"
                            >删除</el-button>
                          </span>
                        </template>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "tableBase",
        props: {
            // table表头
            headItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            // 表格加载状态
            listLoading: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            // 表格数据
            dataItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            operateWidth: {
                type: String,
                default() {
                    return "200";
                }
            },
            actItems: {
                type: Array,
                default() {
                    return [];
                }
            },
            apis: {
                type: Object,
                default() {
                    return {};
                }
            },
        },

        mounted() {
        },
        methods: {
            // 表格内操作
            actEvent(eventName, val) {
                this.$emit("actEvent", { eventName, val });
            },
        }
    }
</script>

<style scoped>

</style>
